import { useState, useImperativeHandle, forwardRef } from 'react';
import { connect } from 'umi';
import { Modal, Button } from 'antd';
import styles from './index.less';
import { warnYellow } from '@/assets';

function PowerValidationModal({ dispatch }, ref) {
  useImperativeHandle(ref, () => ({
    initHandle,
  }));

  const [showModal, setShowModal] = useState(false),
    [validInfo, setValidInfo] = useState({}),
    [submitPayload, setSubmitPayload] = useState(null);

  const initHandle = (validInfo, submitPayload) => {
    setShowModal(true);
    setValidInfo(validInfo);
    setSubmitPayload(submitPayload);
  };

  const modalTitleRender = () => (
    <div className={styles.modalTitle}>
      <img src={warnYellow} />
      <span className={styles.text}>申报电量异常警告</span>
    </div>
  );

  const submit = () => {
    setShowModal(false);
    dispatch({ type: 'rollingBatch/submitProgram', payload: submitPayload });
  };

  return (
    <Modal
      className={styles.powerValidModal}
      centered={true}
      title={modalTitleRender()}
      visible={showModal}
      footer={null}
      onCancel={() => setShowModal(false)}
    >
      <div>如下时点内存在交易单元的申报电量大于交易方向限额：</div>
      <div className={styles.messageContent}>
        {validInfo?.list?.map(({ exceedTitles, hourOrder }) => (
          <div className={styles.contentItem} key={`exceedMoal${hourOrder}`}>
            时点 {hourOrder} ：{exceedTitles.join('、')};
          </div>
        ))}
      </div>
      <div className={styles.contentItem}>您是否还要提交？</div>
      <div className={styles.btnGroup}>
        <Button type="primary" onClick={submit}>
          提交
        </Button>
        <Button onClick={() => setShowModal(false)}>取消</Button>
      </div>
    </Modal>
  );
}

export default connect(({}) => ({}), null, null, { forwardRef: true })(
  forwardRef(PowerValidationModal),
);
